<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/12/14
  Time: 0:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<el-card>
    <el-row style="width: 100%">
        <el-col :md="{span:8}" style="margin-bottom: 5px">
            <el-date-picker
                    v-model="manageCreditCard.rangeTime"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    style="width: 100%"
            >
            </el-date-picker>
        </el-col>
        <el-col :md="{span:6,offset:4}" style="margin-bottom: 5px">
            <el-select v-model="manageCreditCard.bankId" placeholder="选择银行名称" style="width: 110px;margin-right: 5px">
                <el-option label="选择银行" value=""></el-option>
                <el-option
                        v-for="(item,index) in BankMsgAll"
                        :key="index"
                        :label="item.bankName" :value="item.bankId"></el-option>

            </el-select>
            <el-select v-model="manageCreditCard.isPay" placeholder="选择银行名称" style="width: 110px">
                <el-option label="是否还款" value=""></el-option>
                <el-option label="已还款" value="2"></el-option>
                <el-option label="未还款" value="1"></el-option>
            </el-select>
        </el-col>
        <el-col :md="{span:6}" style="margin-bottom: 5px">
            <el-input
                    v-model="manageCreditCard.search"
                    placeholder="输入信用卡卡号"
                    style="width: 100%"
            >
                <template #append>
                    <el-button @click="loadManagerCreditCard(1)">
                        <el-icon>
                            <i class="fa fa-search"></i>
                        </el-icon>
                    </el-button>
                </template>
            </el-input>
        </el-col>
    </el-row>
    <el-table :data="manageCreditCard.tableDatas" style="width: 100%">
        <el-table-column prop="cardId" label="信用卡ID"></el-table-column>
        <el-table-column prop="cardNumId" label="信用卡卡号"></el-table-column>
        <el-table-column prop="cardPrice" label="代还款金额"></el-table-column>
        <el-table-column prop="cardTime" label="还款日期"></el-table-column>
        <el-table-column prop="bankName" label="银行名称"></el-table-column>
        <el-table-column prop="cardState" label="是否还款">
            <template #default="scope">
                {{ scope.row.cardState===1?"未还款":"已还款" }}
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
                <el-button size="mini" @click="editUserCreditCard(scope.row.cardId)"
                >修改
                </el-button
                >
                <el-popconfirm title="是否确认删除当前信用卡?" @confirm="deleteUserCreditCard(scope.row.cardId)">
                    <template #reference>
                        <el-button
                                size="mini"
                                type="danger"
                        >删除
                        </el-button
                        >
                    </template>
                </el-popconfirm>

            </template>
        </el-table-column>
    </el-table>
    <el-pagination style="text-align: center" @current-change="tabManagerPage" layout="prev, pager, next"
                   :total="manageCreditCard.itemsCount" :page-size="10"></el-pagination>
</el-card>
